<template>
  <view class="swim-list-wrap">
    <h-tab flex @tab-click="handleTab">
      <h-tab-pane name="1" label="未使用泳票">
        <hSkeleton v-if="!noShow"/>
        <scroll-view
          v-if="noShow"
          :scroll-y="true"
          :refresherEnabled="true"
          :refresher-triggered="noTriggered"
          style="height: calc(100vh - 130rpx);"
          @refresherRefresh="handleNoPullDownRefresh"
          @scrollToLower="handleNoScrollToLower"
        >
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view class="loading" v-if="noLoading">
            <view class="spinner"></view>
            <text class="loading-text">加载中...</text>
          </view>

        </scroll-view>
      </h-tab-pane>
      <h-tab-pane name="2" label="使用过的泳票">
        <hSkeleton v-if="!show"/>
        <scroll-view
          v-if="show"
          :scroll-y="true"
          :refresherEnabled="true"
          :refresher-triggered="triggered"
          style="height: calc(100vh - 130rpx);"
          @refresherRefresh="handlePullDownRefresh"
          @scrollToLower="handleScrollToLower"
        >
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view id="demo1" class="scroll-view-item demo-text-1">1</view>
          <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
          <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          <view class="loading" v-if="loading">
            <view class="spinner"></view>
            <text class="loading-text">加载中...</text>
          </view>
        </scroll-view>
      </h-tab-pane>
    </h-tab>

  </view>

</template>

<script>
import Taro from "@tarojs/taro";
import {
  requestData
} from '../../utils/http.js';

export default {
  data() {
    return {
      noTriggered: true,
      triggered: true,
      noLoading: false,
      loading: false,
      noShow: false,
      show: false
    }
  },
  onLoad({key}) {
    // 接收"回车搜索"或"点击搜索按钮"跳转到商品页面时传入的关键字
    this.query = key
    // 初始化加载数据
/*    this.loadData();*/
  },
  onShow() {
    this.initNoData()
  },
  methods: {
    initNoData() {
      this.noShow = false
      setTimeout(() => {
        this.noShow = true
      }, 1000)
    },

    initData() {
      this.show = false
      setTimeout(() => {
        this.show = true
      }, 1000)
    },

    handleTab(name) {
      if(name == 1) {
        this.initNoData()
      }
      else if(name == 2) {
        this.initData()
      }
    },

    /*
    * 未使用泳票
    * */
    handleNoPullDownRefresh() {
      console.log('下拉刷新')
      this.noTriggered = true
      Taro.startPullDownRefresh();
      setTimeout(() => {
        // 停止下拉刷新
        this.noTriggered = false
        Taro.stopPullDownRefresh()
      }, 1000)
    },

    handleNoScrollToLower() {
      this.noLoading = true
      console.log('触底事件，做上拉加载')
      setTimeout(() => {
        this.noLoading = false
      }, 1000)
    },

    /*
    * 使用过的泳票
    * */
    handlePullDownRefresh() {
      console.log('下拉刷新')
      this.triggered = true
      Taro.startPullDownRefresh();
      setTimeout(() => {
        // 停止下拉刷新
        this.triggered = false
        Taro.stopPullDownRefresh()
      }, 1000)
    },

    handleScrollToLower() {
      this.loading = true
      console.log('触底事件，做上拉加载')
      setTimeout(() => {
        this.loading = false
      }, 1000)
    }


  },

}
</script>

<style lang="less">
.swim-list-wrap {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  padding-bottom: 60rpx;
  box-sizing: border-box;
}

.product-item {
  width: 100%;
  height: auto;
  border-bottom: 1px solid rgb(235, 235, 236);
  padding: 10px 15px;
  font-size: 15px;
  color: #303133;
  box-sizing: border-box;
}

.loadingIcon {
  margin-top: 5px;
}
.scroll-view-item {
  border-bottom: 1PX solid #efefef;
  padding: 16rpx 0;
  font-size: 28rpx;
  color: #636363;
}
.scroll-view-item:last-child {
  margin-bottom: 20PX;
}
.spinner {
  width: 20px;
  height: 20px;
  background-color: #d5ad57;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(60px) }
  50% { -webkit-transform: perspective(60px) rotateY(180deg) }
  100% { -webkit-transform: perspective(60px) rotateY(180deg)rotateX(180deg) }
}

@keyframes rotateplane {
  0% {
    transform: perspective(60px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(60px) rotateX(0deg) rotateY(0deg)
  } 50% {
      transform: perspective(60px) rotateX(-180.1deg) rotateY(0deg);
      -webkit-transform: perspective(60px) rotateX(-180.1deg) rotateY(0deg)
    } 100% {
        transform: perspective(60px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(60px) rotateX(-180deg) rotateY(-179.9deg);
      }
}
.loading {
  font-size: 20rpx;
  color: #b6b6b6;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
}
.loading-text {
  margin-left: 20rpx;
}
</style>
